<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Luckin Coffee</title>
  </head>
  <style scoped>
    .iconfont1 {
      font-family: "iconfont" !important;
      font-size: 25px;
      font-style: normal;
      color: #fff;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      /* padding: 0 5px; */
      opacity: 0;
      position: absolute;
      bottom: -9px;
      left: -52px;
      /* font-size: 2em; */
      line-height: 1.5;
      width: 100%;
      color: #fff;
      text-align: center;
      float: right;
  
      animation: fadein 3s 1s;
    }
  
    .anim {
      animation: scale .3s ease;
    }
  
    @keyframes scale {
      0% {
        transform: scale(2, 2);
      }
  
      100% {
        transform: scale(1, 1);
      }
    }
  
    @keyframes fadein {
      100% {
        opacity: 1;
      }
    }
  
    .loading-first {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background:url(./static/3.gif);
      z-index: 999;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
    }
    .index-title {
  
      font-size: 50px;
  
      font-style: oblique;
      position: absolute;
      top: 2.3em;
      width: 100%;
      color: #fff;
  
      line-height: 1.5;
      text-align: center;
      opacity: 1;
      animation: titleIn 1s both;
    }
  
    .foot {
      position: absolute;
      bottom: 10%;
      left: 50%;
      transform: translate(-50%, -50%);
  
    }

  </style>
  <body>
    <div class="loading-first">
      <!-- <div style="font-size: 20px;">二次元 爬 爬 爬！！！</div> -->
      <div class="index-title">Welcome to</div>
      <div class="foot"><i class="iconwangyiyunyinle iconfont1"></i>Luckin Coffee</div>
  
    </div>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script>
    const load = document.querySelectorAll('.loading-first')[0]
    console.log(load);
  
    const body = document.querySelectorAll('body')[0]
    let data = sessionStorage.getItem('loading-first');
  
    if (!data) {
      setLoad(body, load)
    }
  
    function setLoad(body, load) {
      // body.style.overflow = 'hidden';
      load.style.display = 'block';
      sessionStorage.setItem('load', 1);
      setTimeout(() => {
        load.style.display = 'none'
        // body.style.overflow = '';
        body.setAttribute('class', 'anim')
      },3000);
  
    }
  </script>
</html>